@page
@{ Layout = "_Layout"; }
@section Styles{
<style>
  .main-wrapper {
    padding: 10px 30px;
  }

  .el-card__body {
    /* padding: 20px 0 10px; */
    padding: 20px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  canvas {
    border: 1px dashed black;
    margin: 0 auto;
  }

  .svg-icon {
    width: 1em;
    height: 1em;
    margin-left: .35em;
    margin-right: .35em;
    vertical-align: -.15em;
  }
  .is-active .svg-icon {
    fill: #fff;
  }
  #main {
    padding: 10px;
    background-color: #fff;
  }
</style>
}

<el-row>
  <el-card>

    <canvas id="canvas"></canvas>

    <div style="padding: 14px;">

      <el-radio-group size="small" v-model="drawType" v-on:input="drawTypeChange">
        <el-radio-button label="select">
          <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M673.408 998.4a25.6 25.6 0 0 1-22.144-12.736l-188.16-324.352-144.192 142.016a25.664 25.664 0 0 1-43.392-15.296L189.44 54.208a25.728 25.728 0 0 1 40.64-23.616l594.368 438.976a25.6 25.6 0 0 1-8.256 45.248l-194.816 54.656 188.16 324.352c3.392 5.888 4.352 12.864 2.624 19.456s-6.016 12.16-11.904 15.552l-113.92 66.048a25.6 25.6 0 0 1-12.864 3.456z m-204.8-404.096a25.28 25.28 0 0 1 22.08 12.8l191.872 330.752 69.632-40.384-191.872-330.816a25.728 25.728 0 0 1 15.168-37.504l176.256-49.472L247.04 106.88l73.088 623.232L450.56 601.6a25.472 25.472 0 0 1 17.92-7.296z"></path>
          </svg>
          选择
        </el-radio-button>
        <el-radio-button label="text">
          <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M222.830565 208.372093h577.488372v85.049834H222.830565z"></path>
            <path d="M474.578073 258.551495h85.049834v557.076412h-85.049834z"></path>
            <path d="M1022.299003 1022.299003h-1020.598006v-1020.598006h1020.598006z m-935.548172-85.049834h850.498338v-850.498338h-850.498338z"></path>
          </svg>
          标注
        </el-radio-button>
        <el-radio-button label="mosaic">
          <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M768 85.333333h170.666667v170.666667h-170.666667V85.333333z"></path>
            <path d="M768 426.666667V256h-170.666667V85.333333h-170.666666v170.666667H256V85.333333H85.333333v170.666667h170.666667v170.666667H85.333333v170.666666h170.666667v170.666667H85.333333v170.666667h170.666667v-170.666667h170.666667v170.666667h170.666666v-170.666667h170.666667v170.666667h170.666667v-170.666667h-170.666667v-170.666667h170.666667v-170.666666h-170.666667z m-170.666667 0h170.666667v170.666666h-170.666667v-170.666666z m-170.666666 0V256h170.666666v170.666667h-170.666666z m0 170.666666H256v-170.666666h170.666667v170.666666z m0 0h170.666666v170.666667h-170.666666v-170.666667z"></path>
          </svg>
          脱敏
        </el-radio-button>
        <el-radio-button label="arrow">
          <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M533.205333 128.042667l322.346667 0.085333 5.162667 0.597333 3.754666 0.853334 4.437334 1.450666 3.84 1.706667 2.688 1.536 2.688 1.749333 2.730666 2.133334 2.688 2.517333 4.010667 4.693333 3.072 4.693334 2.261333 4.821333 1.493334 4.48 0.682666 2.816 0.426667 2.218667 0.426667 6.314666v320.170667a42.666667 42.666667 0 0 1-85.034667 4.992l-0.298667-4.992v-217.173333L200.789333 883.498667a42.666667 42.666667 0 0 1-56.32 3.541333l-4.010666-3.541333a42.666667 42.666667 0 0 1-3.541334-56.32l3.541334-4.010667L750.208 213.333333h-217.002667a42.666667 42.666667 0 0 1-42.368-37.674666l-0.298666-4.992a42.666667 42.666667 0 0 1 42.666666-42.666667z"></path>
          </svg>
          画箭头
        </el-radio-button>
        <el-radio-button label="ellipse">
          <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M512 0C229.232 0 0 229.232 0 512s229.232 512 512 512 512-229.232 512-512S794.768 0 512 0z m0 928C282.256 928 96 741.744 96 512 96 282.24 282.256 96 512 96s416 186.24 416 416c0 229.744-186.256 416-416 416z"></path>
          </svg>
          画圆
        </el-radio-button>
        <el-radio-button label="rectangle">
          <svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M141.074286 906.496h741.851428c89.581714 0 134.582857-44.562286 134.582857-132.845714V250.331429c0-88.283429-45.001143-132.845714-134.582857-132.845715H141.074286C51.931429 117.504 6.491429 161.645714 6.491429 250.331429V773.668571c0 88.704 45.44 132.845714 134.582857 132.845715z m1.28-68.992c-42.861714 0-66.852571-22.710857-66.852572-67.291429V253.805714c0-44.580571 23.990857-67.291429 66.852572-67.291428h739.291428c42.422857 0 66.852571 22.710857 66.852572 67.291428V770.194286c0 44.580571-24.429714 67.291429-66.852572 67.291428z"></path>
          </svg>
          画矩形
        </el-radio-button>
      </el-radio-group>

      <el-button-group>
        <el-button size="small" type="default" plain icon="el-icon-download" v-on:click="btnDownloadClick">
          下载图片
        </el-button>
      </el-button-group>

      <div class="tips" style="margin-top: 10px">点击选择按钮，拖动鼠标选择多个元素，选中后按DELETE键可以批量删除元素；画圆以及矩形时，如果同时按SHIFT键，将能够画出正圆以及正方形。</div>

    </div>
  </el-card>
</el-row>

<el-divider></el-divider>
<div style="height: 10px"></div>

<el-row>
  <el-col :span="24" align="center">
    <el-button type="primary" v-on:click="btnSubmitClick" :disabled="isChanged == false" size="small">保 存</el-button>
    <el-button size="small" v-on:click="btnCancelClick">关 闭</el-button>
  </el-col>
</el-row>

<el-dialog title="标注" :visible.sync="dialogTextVisible">
  <el-form :model="textForm" label-position="top">
    <el-form-item label="请输入需要插入的标注文字">
      <el-input type="textarea" :rows="5" v-model="textForm.text" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="箭头方向">
      <el-radio-group v-model="textForm.arrowType">
        <el-radio-button label="1">
          <img src="/sitefiles/assets/images/arrow1s.png" style="width: 120px; display: block; margin-bottom: 5px;" />
          左下
        </el-radio-button>
        <el-radio-button label="2">
          <img src="/sitefiles/assets/images/arrow2s.png" style="width: 120px; display: block; margin-bottom: 5px;" />
          左上
        </el-radio-button>
        <el-radio-button label="3">
          <img src="/sitefiles/assets/images/arrow3s.png" style="width: 120px; display: block; margin-bottom: 5px;" />
          右下
        </el-radio-button>
        <el-radio-button label="4">
          <img src="/sitefiles/assets/images/arrow4s.png" style="width: 120px; display: block; margin-bottom: 5px;" />
          右上
        </el-radio-button>
        <!-- <el-radio-button label="">可调整</el-radio-button> -->
      </el-radio-group>
    </el-form-item>
    <el-form-item v-if="textForm.arrowType" label="文本框尺寸">
      <el-radio-group v-model="textForm.isLarge">
        <el-radio-button :label="false">小</el-radio-button>
        <el-radio-button :label="true">大</el-radio-button>
      </el-radio-group>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer" style="text-align: center;">
    <el-button type="primary" v-on:click="btnTextSubmitClick">确 定</el-button>
    <el-button v-on:click="dialogTextVisible = false">取 消</el-button>
  </div>
</el-dialog>

@section Scripts{
  <script src="/sitefiles/assets/lib/fabric-5.3.0.min.js" type="text/javascript"></script>
  <script src="/sitefiles/assets/js/admin/cms/imageEditor.js" type="text/javascript"></script>
}